vue2 + vue-router + vuex + iview 入门项目

简单的vue2 + vue-router + vuex + iview 入门项目，一个移动端平台的简易考试系统。灵感来源于近期工作项目中开发的一套考试平台系统。欢迎大家来issues指出错误共同进步。

项目运行

# 克隆到本地
git clone https://github.com/webproblem/vue-demo.git
# 进入项目
cd vue-demo
# 安装依赖
npm install，可以使用cnpm代替npm
#运行项目
npm run dev

项目文件说明

主要是src文件夹。

• data: 模拟的数据
• page: 存放的vue组件页面
• router: vue路由文件
• store: vuex状态管理文件
• utils: 公共的工具函数

功能描述及实现

可以通过设置不同的路由参数来切换不同的考试试题

<div class="button-group">
        <span><router-link :to="{name: 'exam1', query: {id: 1}}">考试试题一</router-link></span>
        <span><router-link :to="{name: 'exam1', query: {id: 2}}">考试试题二</router-link></span>
</div>

在src/data目录下的模拟数据中，配置好考试试题和考试时长等信息。

/**
 * @param {Number} examTime 考试时长
 * @param {String} title 题目内容
 * @param {Array} options 答案选项
 * @param {Number} answer 正确答案索引，从0开始
 * @param {Number} score 题目对应的分数
 * @param {String} examId 题目唯一ID
*/

export const examTime = 30;

export const examList = [
    {
        title: "《春晓》这首诗是出自哪位诗人？",
        options: ["李白", "杜甫", "王维", "苏轼"],
        answer: 1,
        score: 5,
        examId: "0"
    }
]

然后运行项目，进入首页就可以选择试卷答题了！！！

在考试时间结束的时候，系统会自动提交答题试卷，或者在答完所有题的时候，手动点击提交试卷，系统会根据答题情况给出相应的考试结果。（还有一些细节没有考虑进去，后期可以添加查看答错题目的功能等）

<template>
  <div class="exam-result">
      <div class="scores-container">
          <div class="">
            <header class="scores">{{getScore}}分</header>
            <label class="result-tips">{{resultTips}}</label>
          </div>
      </div>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'

export default {
    data () {
        return {
            //答错的题
            errorExam: [],
            //答对的题
            sureExam: [],
            //总分
            totalScore: 0,
            //得分
            getScore: 0,
            resultTips: "",
            examList: []
        }
    },
    computed:mapState([
        'saveAnswer',
        'useTime',
        'examId'
    ]),
    mounted () {
        const vm = this;
        vm.examList = vm.$store.state.examList[this.examId - 1] || [];
        vm.getSureAnswer();
    },
    methods: {
        getSureAnswer() {
            var vm = this;
            vm.examList.forEach(function(item, index){
                vm.totalScore += parseInt(item.score);
                if((item.answer + 1) == vm.saveAnswer[index]){
                    vm.sureExam.push(item);
                    vm.getScore += parseInt(item.score);
                }else{
                    vm.errorExam.push(item);
                }
            })
            vm.setResultTips();
            console.log(this.useTime)
            console.log("答对题:" + vm.sureExam.length);
        },
        setResultTips() {
            const scores = [100 ,90, 70, 60, 40, 20],
                  tips = [
                      '哇，你太优秀了，厉害了！！！',
                      '智商只差一步就爆表了，继续加油！',
                      '表现很好，good！',
                      '嗯，不错，还有很大的进步空间！',
                      '还需要继续加油哦！！！',
                      'What are you弄啥嘞！'
                  ];
            if(this.getScore <= scores[5]) {
                this.resultTips = tips[5];
                return;
            }
            if(this.getScore <= scores[4]) {
                this.resultTips = tips[4];
                return;
            }
            if(this.getScore <= scores[3]) {
                this.resultTips = tips[3];
                return;
            }
            if(this.getScore <= scores[2]) {
                this.resultTips = tips[2];
                return;
            }
            if(this.getScore <= scores[1]) {
                this.resultTips = tips[1];
                return;
            }
            if(this.getScore <= scores[0]) {
                this.resultTips = tips[0];
                return;
            }
        }
    }
}
</script>

本教程是基于已经有一定vue基础之上的，如果你还不了解什么是vue建议先去学习一下。友情链接:
vue中文官网
vuex文档
vue-router文档
欢迎大家star和issues。
源码地址:
https://github.com/webproblem/vue-demo